<template>
  <h1>你好！</h1>
  <p v-text="name"></p>
  <p>{{ name }}</p>
  <p>{{ info }}</p>
  <p v-html="info"></p>
  <p :data="dataVal">我有属性值{{ dataVal }}</p>
  <p class="text" :class="{ red: isRed }">我是红色的</p>
  <p v-if="isTrue">我是if存在</p>
  <p v-show="isFalse">我是show展示</p>
  <ul>
    <li v-for="(item, index) in userList" :key="index">
      学生姓名：{{ item.username }} 学生年龄：{{ item.userage }}
    </li>
  </ul>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "home",
  setup() {
    //相当于beforecreate和created
    const data = reactive({
      name: "小红",
      age: 20,
      info: "<i>我是斜体字</i>",
      dataVal: 200,
      isRed: true,
      isTrue: true,
      isFalse: false,
      userList: [
        {
          username: "小红",
          userage: 10,
        },
        {
          username: "小明",
          userage: 12,
        },
        {
          username: "小李",
          userage: 13,
        },
        {
          username: "小蓝",
          userage: 14,
        },
        {
          username: "杰克",
          userage: 11,
        },
      ],
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style >
li {
  list-style: none;
}
.red {
  color: red;
}
</style>
